<route type="home">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "首页",
    "navigationStyle": "custom"
  }
}
</route>

<template>
  <view class="page-container">
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-left">
        <view class="brand">
          <text class="brand-name">AlphaStock</text>
          <text class="brand-badge">实时</text>
        </view>
        <text class="navbar-subtitle">全景洞察 · 智能驱动</text>
      </view>
      <view class="navbar-right">
        <view class="nav-icon">
          <u-icon name="bell-fill" size="40" color="#fff"></u-icon>
        </view>
        <view class="nav-icon">
          <u-icon name="calendar-fill" size="40" color="#fff"></u-icon>
        </view>
      </view>
    </view>

    <scroll-view class="page-scroll" scroll-y :style="{ height: scrollViewHeight + 'px', paddingTop: statusBarHeight + 50 + 'px' }">
      <view class="scroll-inner">
        <view class="hero-card">
          <view class="hero-content">
            <text class="hero-label">今日策略精选</text>
            <text class="hero-title">主题色驱动的跨页体验</text>
            <text class="hero-desc"> 聚合策略中心、社区热榜与个人看板，一站式掌控市场节奏。 </text>
            <view class="hero-actions">
              <view class="hero-action primary" @tap="handleNavigate('/pages/product/index')">进入策略中心</view>
              <view class="hero-action ghost" @tap="handleNavigate('/pages/community/index')">查看社区热榜</view>
            </view>
          </view>
          <view class="hero-metrics">
            <view class="metric-card" v-for="item in marketPulse" :key="item.label">
              <text class="metric-label">{{ item.label }}</text>
              <text class="metric-value" :class="item.trend">{{ item.value }}</text>
              <text class="metric-tip">{{ item.tip }}</text>
            </view>
          </view>
        </view>

        <view class="section quick-section">
          <view class="section-header">
            <text class="section-title">快捷入口</text>
            <text class="section-subtitle">覆盖策略·社区·我的核心场景</text>
          </view>
          <view class="quick-grid">
            <view v-for="item in quickEntryList" :key="item.title" class="quick-item" @tap="handleNavigate(item.path)">
              <view class="quick-icon" :class="item.bgClass">
                <u-icon :name="item.icon" color="#fff" size="44"></u-icon>
              </view>
              <text class="quick-title">{{ item.title }}</text>
              <text class="quick-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>

        <view class="section strategy-section">
          <view class="section-header">
            <text class="section-title">
              策略中枢
              <text class="title-tag">Product</text>
            </text>
            <text class="section-link" @tap="handleNavigate('/pages/product/index')">查看更多</text>
          </view>
          <view class="strategy-list">
            <view v-for="strategy in strategyHighlights" :key="strategy.title" class="strategy-card">
              <view class="strategy-head">
                <view class="strategy-icon">
                  <text>{{ strategy.short }}</text>
                </view>
                <text class="strategy-tag">{{ strategy.tag }}</text>
              </view>
              <text class="strategy-title">{{ strategy.title }}</text>
              <text class="strategy-desc">{{ strategy.desc }}</text>
              <view class="strategy-meta">
                <text>{{ strategy.metric }}</text>
                <text :class="['strategy-change', strategy.trend]">{{ strategy.change }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="section community-section">
          <view class="section-header">
            <text class="section-title">
              社区热帖
              <text class="title-tag accent">Community</text>
            </text>
            <text class="section-link" @tap="handleNavigate('/pages/community/index')">去讨论</text>
          </view>
          <view class="post-list">
            <view v-for="post in highlightPosts" :key="post.id" class="post-card" @tap="handleNavigate('/pages/community/article/index')">
              <view class="post-top">
                <text class="post-rank">#{{ post.rank }}</text>
                <text class="post-tag">{{ post.tag }}</text>
              </view>
              <text class="post-title">{{ post.title }}</text>
              <text class="post-summary">{{ post.summary }}</text>
              <view class="post-meta">
                <text>{{ post.author }}</text>
                <text class="post-heat">
                  <u-icon name="fire-fill" size="32" color="#e54d42"></u-icon>
                  {{ post.heat }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <view class="section mine-section">
          <view class="section-header">
            <text class="section-title">
              我的助手
              <text class="title-tag tertiary">Mine</text>
            </text>
            <text class="section-subtitle">同步个人资产进度与服务</text>
          </view>
          <view class="service-card" v-for="service in serviceCards" :key="service.title">
            <view class="service-icon" :style="{ background: service.bg }">
              <u-icon :name="service.icon" color="#fff" size="40"></u-icon>
            </view>
            <view class="service-content">
              <text class="service-title">{{ service.title }}</text>
              <text class="service-desc">{{ service.desc }}</text>
            </view>
            <text class="service-link" @tap="handleNavigate(service.path)">前往</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useSystemStore } from '@/stores/system'

const systemInfo = uni.getSystemInfoSync()
const systemStore = useSystemStore()
const { statusBarHeight } = storeToRefs(systemStore)
const windowHeight = systemInfo.windowHeight || 800
const scrollViewHeight = windowHeight

const marketPulse = [
  { label: '上证指数', value: '+1.28%', trend: 'up', tip: '量能 +12%' },
  { label: '北向资金', value: '34.2亿', trend: 'up', tip: '净流入' },
  { label: '热点温度', value: '82', trend: 'flat', tip: '社区热度值' }
]

const quickEntryList = [
  {
    title: '策略中心',
    desc: '热力图·一进二',
    icon: 'fire-fill',
    bgClass: 'bg-product',
    path: '/pages/product/index'
  },
  {
    title: '社区热榜',
    desc: '研报解读精选',
    icon: 'chat-fill',
    bgClass: 'bg-community',
    path: '/pages/community/index'
  },
  {
    title: '个人资产',
    desc: '盈亏概览',
    icon: 'wallet-fill',
    bgClass: 'bg-mine',
    path: '/pages/mine/index'
  }
]

const strategyHighlights = [
  {
    title: '龙虎榜追踪 · 重点席位回看',
    desc: '实时追踪龙头个股席位动向，结合历史胜率给出风险提示。',
    metric: '精准率 98%',
    change: '+4.2%',
    trend: 'up',
    tag: '龙虎榜',
    short: '龙'
  },
  {
    title: '趋势雷达 · 量价共振日报',
    desc: '智能扫描全市场量价共振信号，重点标记放量突破品种。',
    metric: '信号 36 只',
    change: '+12',
    trend: 'up',
    tag: '雷达',
    short: '势'
  },
  {
    title: '异动预警 · 高频监控',
    desc: '分钟级异常波动捕捉，支持自选股全覆盖预警。',
    metric: '预警触发 18 次',
    change: '-3',
    trend: 'down',
    tag: '预警',
    short: '警'
  }
]

const highlightPosts = [
  {
    id: 'post-1',
    rank: 1,
    title: '重新思考低空经济：无人机对军工与消费板块的双重拉动',
    summary: '覆盖龙头链条与供应商清单，配合策略中心席位追踪信号。',
    tag: '研报解读',
    author: '研报研究所',
    heat: '792'
  },
  {
    id: 'post-2',
    rank: 2,
    title: '一进二策略复盘：本周准星命中率 78%',
    summary: '结合策略中心智能指标，对连板标的行动路径进行拆解。',
    tag: '策略研习',
    author: '实盘小队',
    heat: '468'
  },
  {
    id: 'post-3',
    rank: 3,
    title: 'Python 实战：一键追踪龙虎榜高频席位',
    summary: '从抓取到信号联动全流程复盘，与个人资产盈亏联动。',
    tag: '量化',
    author: '程序员爱炒股',
    heat: '1.2k'
  }
]

const serviceCards = [
  {
    title: '资产看板',
    desc: '同步我的页面资产指标，掌握盈亏与仓位分布。',
    icon: 'bar-chart',
    bg: 'linear-gradient(135deg, rgba(229,77,66,0.9) 0%, rgba(255,138,115,0.9) 100%)',
    path: '/pages/mine/index'
  },
  {
    title: '每日复盘',
    desc: '结合策略中心的行情雷达与社区热度，生成个性化复盘。',
    icon: 'calendar-fill',
    bg: 'linear-gradient(135deg, #ffb45b 0%, #ffe097 100%)',
    path: '/pages/mine/index'
  },
  {
    title: '权益兑换',
    desc: '使用社区成长值兑换专属策略与VIP权益。',
    icon: 'coupon-fill',
    bg: 'linear-gradient(135deg, #7cc4ff 0%, #b5e1ff 100%)',
    path: '/pages/mine/index'
  }
]

const handleNavigate = (path) => {
  if (!path) {
    return
  }
  uni.navigateTo({ url: path })
}
</script>

<style lang="scss">
@import './index.scss';
</style>
